<template>
  <div>
    <el-card class='box-card'>
      <template #header>
        <div class='zjustify'>
          <div>
            <el-input v-model='state.form.name' placeholder='输入名称回车查询' class='list-search' clearable @keyup.enter='listQuery(state)'/>
            <el-button type='primary' @click='listQuery(state)' plain>查 询</el-button>
            <el-button class='more-button' :icon='state.moreParams?ArrowUp:ArrowDown' plain @click='state.moreParams=!state.moreParams'/>
          </div>
          <div>
            <el-button type='success' :icon='Plus' @click='editRef.open({})' plain>新增</el-button>
            <el-button type='success' :icon='Download' @click='toFinish' plain>导出</el-button>
            <el-button type='danger' :icon='Delete' :disabled='state.multiple' @click='listDelete(state)' plain>删除</el-button>
          </div>
        </div>
        <div v-show='state.moreParams' class='more-params'>
          <el-form :inline='true' label-width='100px'>
            <el-form-item label='更多参数1'>
              <el-input v-model='state.form.xxx' placeholder='更多参数1'/>
            </el-form-item>
            <el-form-item label='更多参数2'>
              <el-input v-model='state.form.yyy' placeholder='更多参数2'/>
            </el-form-item>
            <el-form-item/>
          </el-form>
        </div>
      </template>
      <el-table height='400' :cell-style="{padding:'2px'}" :row-style="{height: '36px'}"
                v-loading='state.loading' :data='state.list'
                border stripe @selection-change='listSelect($event,state)'>
        <el-table-column type='selection' width='55' align='center'/>
        <el-table-column label='id' prop='id' width='160'>
          <template #default='scope'>
		    <span style='cursor:pointer;color: #3e9ece' @click='editRef.open({id:scope.row.id})'>
              {{ scope.row.id }}
            </span>
          </template>
        </el-table-column>

        <el-table-column label="名称" prop="name"/>
        <el-table-column label="年龄" prop="age"/>
        <el-table-column label="创建人" prop="createBy"/>
        <el-table-column label="创建时间" prop="createTime"/>
        <el-table-column label="修改人" prop="updateBy"/>
        <el-table-column label="修改时间" prop="updateTime"/>

      </el-table>

      <el-pagination
          @size-change='listQuery(state)' @current-change='listQuery(state)'
          class='mt8' :pager-count='5' :page-sizes='[10, 20, 30]' background
          :total='state.total' v-model:current-page='state.form.current'
          v-model:page-size='state.form.pageSize'
          layout='total, sizes, prev, pager, next, jumper'
      />
    </el-card>
    <Pedit ref="editRef" @close="listQuery(state)"/>
  </div>
</template>

<script lang='ts' setup>
import {Plus, Delete,Download, ArrowDown, ArrowUp} from '@element-plus/icons-vue';
import {onMounted, reactive, ref} from 'vue';
import {listQuery, listDelete, listSelect} from '/@/comps/page/index';
import Pedit from './edit.vue';
import {useMenuApi} from "/@/api/menu";


const editRef = ref() as any;
const state = reactive({
  url: '/ceshi', loading: true, ids: [],
  form: {}, single: true, multiple: true, list: [], total: 0,
});
const menuApi = useMenuApi();
 const toFinish = () => {
   menuApi.exportExcel()
};
onMounted(() => {
  listQuery(state);
});
</script>

